<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }
        @property --angle {
            syntax: '<angle>';
            initial-value: 90deg;
            inherits: true;
        }
        @property --gradX {
            syntax: '<percentage>';
            initial-value: 50%;
            inherits: true;
        }
        @property --gradY {
            syntax: '<percentage>';
            initial-value: 0%;
            inherits: true;
        }
        body {
            font-family: Raleway, sans-serif;
            text-align: center;
            margin: 0;
            padding: 1rem;
            background-color: rgba(10, 12, 18, 1);
            color: white;
            min-height: 100vh;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }
        p {
            margin: 0;
        }
        :root {
            --angle: 90deg;
            --gradX: 100%;
            --gradY: 50%;
            --d: 2500ms;
            --c1: rgba(168, 239, 255, 1);
            --c2: rgba(66, 106, 116, 0.1);
        }
        .wrapper {
            min-width: min(40rem, 100%);
        }
        .box {
            font-size: 3vw;
            margin: max(1rem, 3vw);
            border: 0.35rem solid;
            padding: 3vw;
            border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
            animation: borderRotate var(--d) linear infinite forwards;
        }
        .box:nth-child(2) {
            border-image: radial-gradient(ellipse at var(--gradX) var(--gradY), var(--c1), var(--c1) 10%, var(--c2) 40%) 30;
            animation: borderRadial var(--d) linear infinite forwards;
        }
        @keyframes borderRotate {
            100% {
                --angle: 420deg;
            }
        }
        @keyframes borderRadial {
            20% {
                --gradX: 100%;
                --gradY: 50%;
            }
            40% {
                --gradX: 100%;
                --gradY: 100%;
            }
            60% {
                --gradX: 50%;
                --gradY: 100%;
            }
            80% {
                --gradX: 0%;
                --gradY: 50%;
            }
            100% {
                --gradX: 50%;
                --gradY: 0%;
            }
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box">
            <p>圆锥形渐变</p>
        </div>
        <div class="box">
            <p>径向渐变</p>
        </div>
    </div>
</body>
</html>
